<div>
	<form method="post" id="form_${action_id}" name="form_${action_id}">
	<input type="hidden" name="entity.id" value="${entity.id?default('')}">
	<input type="hidden" name="entity.classifyId" value="${entity.classifyId}">
	<input type="hidden" name="entity.state" value="${entity.state}">
	<div class="easyui-tabs" style="width:auto;height:auto">
		<div title="基本信息" style="padding:10px">
			<table class="form-table" cellpadding=3>
		    	<tr>
		            <td>${action.getDatagridTitle('name')}:</td>
		            <td><input id="entity.name" name="entity.name" value="${entity.name?default('')}" type="text" style="width: 300px;"  class="easyui-validatebox" data-options="required:true,validType:'length[1,64]'"   /></td>
		        </tr>
		        <tr>	
					<td>${action.getDatagridTitle('serial')}：</td>
					<td><input id="entity.serial" name="entity.serial" value="${entity.serial?default('')}" readonly="readonly" type="text" style="width: 300px;"  class="easyui-validatebox" data-options="required:true,validType:'length[1,58]'"   /></td>
				</tr>
				<tr>	
					<td>${action.getDatagridTitle('price')}：</td>
					<td><input id="entity.price" name="entity.price" value="${entity.price?default('')}" type="text" style="width: 300px;"  class="easyui-numberspinner" data-options="required:true,precision:2,min:0,max:999999" /></td>
				</tr>
				<tr>	
					<td>${action.getDatagridTitle('marketEnable')}：</td>
					<td>
		            	<select class="easyui-combobox" name="entity.marketEnable" style="width:300px;" data-options="required:true">
		            		<#list productEnables as productEnable>
		            			<option value="${productEnable.marketEnable}" <#if productEnable.marketEnable==entity.marketEnable>selected</#if>>${action.getDatagridTitle('marketEnable.'+productEnable.name())}</option>
							</#list>
		            	</select>
		            </td>
				</tr>
		    </table>
		</div>
		<div title="属性" style="padding:10px">
			<table class="form-table" cellpadding=3>
			<#list attributes as attribute>
    			<#if attribute.type==1><!--TEXT(1) SELECT(2)-->
    				<#if attribute.unit==1><!--NUMBER(1) STRING(2)-->
						<td>${attribute.name}:</td>
			        	<td>
			        		<input name="_product_attribute_${attribute.id}" value="${entity.getAttribute(attribute.id)?default('')}" class="easyui-numberspinner" data-options="<#if attribute.required==1 >required:true</#if>" style="width:300px;" ></input>
			        	</td>
					<#elseif attribute.unit==2>
						<td>${attribute.name}:</td>
			        	<td>
			        		<input name="_product_attribute_${attribute.id}" value="${entity.getAttribute(attribute.id)?default('')}" class="easyui-validatebox" data-options="<#if attribute.required==1 >required:true</#if>" style="width:300px;" ></input>
			        	</td>
					</#if>
    			</#if>
    		</#list>
    		</table>
		</div>
		<div title="相册" style="padding:10px" id="photo_album_${action_id}">
			<table class="form-table" cellpadding=3>
				<input type="file" id="image_icon_${action_id}" name="uploadify" style="display: none" />
				<tr id="photo_album_tr_1_${action_id}">
					
				</tr>
				<tr id="photo_album_tr_2_${action_id}">
					<td align="left" style="padding-left:25px;" id="photo_album_tr_2_td_${action_id}">
						
					</td>
				</tr>
			</table>
		</div>
	</div>
	</form>
</div>

<script type="text/javascript">
	$(function(){
		getImageInfo("${entity.id?default('')}");
		uploadify();
	});
	function getImageInfo(id){
		$.ajax({
				url : '${request.contextPath}${namespace?default('')}/mp/product/product-getProductImageDto.json',
				data : {
					id : id
				},
				dataType : 'JSON',
				success : function(json) {
					if(json.suc==1){
						if(json.dto.images.length==0){
							append_tr_1("",1)
						}else{
							append_tr_1(json.dto.images[0].icon,1)
						}
						$("#photo_album_tr_1_${action_id}").append(s);
						var s = ""; 
						$("#photo_album_tr_2_td_${action_id}").empty();
						if(json.dto.images.length > 0){
							for(var i=0 ; i<json.dto.images.length;i++){
								append_tr_2(json.dto.images[i].icon,json.dto.images[i].id);
							}
							selectClass(0);
						}
					}else if(json.suc==0){
						append_tr_1("",1);
					}
				}
			});
	}
	
	function addImage(){
		$('#image_icon_${action_id}').click();
	}
	
	function uploadify(){
		$("#image_icon_${action_id}").uploadify({
			'swf' : '${request.contextPath}/backstage_res/easyui/js/uploadify/uploadify.swf', //指定上传控件的主体文件，默认‘uploader.swf’ 
	        'uploader' : '${request.contextPath}/upload.do',       //指定服务器端上传处理文件，默认‘upload’ 
	        'folder' : '', //要上传到的服务器路径，默认‘/’
	        'fileObjName'   : '${dirUrl}', //暂时作为路径
	        'buttonText' : '添加图片',
	        'auto' : true,
	        'multi' : false,  //是否允许同时上传多文件，默认false 
	        'fileTypeDesc' : '请选择图片文件（不能超过3M）', //出现在上传对话框中的文件类型描述 
	        'fileTypeExts' : '*.jpg;*.bmp;*.png;*.gif',      //控制可上传文件的扩展名，启用本项时需同时声明fileDesc 
	     	'fileSizeLimit' : 3*1024*1024, //3M
	     	'overrideEvents' : ['onUploadSuccess'],
	     	'onUploadSuccess' : function(file, data, response){
	     		append_tr_1(data,1);
	     		append_tr_2(data,"");
	     	}
		});
			
	}
	
	function append_tr_1(str,type){
		$("#photo_album_tr_1_${action_id}").empty();
		var s = ""; 
		if(str==""){
			s = '<td>'+
					'<div class="productImgPrivew">'+
						'<p style="margin-top:100px;">此处显示商品页默认图片<br/>您还未上传商品图片</p>'+
					'</div>'+
				'</td>';
		}else{
			if(type==2){
				s = '<td>'+
						'<div class="productImgPrivew">'+
							'<img src="'+str+'" width:"200" height="180" border="0">'+
						'</div>'+
					'</td>';
			}else{
				s = '<td>'+
						'<div class="productImgPrivew">'+
							'<img src="${downloadUrl}'+str+'" width:"200" height="180" border="0">'+
						'</div>'+
					'</td>';
			}
		}
		$("#photo_album_tr_1_${action_id}").append(s);
	}
	
	function append_tr_2(str,id){
		var s = '<div class="productProgressContainer">'+
					'<div class="productProWrapper">'+
						'<a><img src="${downloadUrl}'+str+'" width:"50px" height="50px" border="0" class="productProWrapper_a" onClick="selectImage(this)"></a>'+
						'<input type="hidden" name="picnames" value="'+str+'">'+	
					'</div>'+
					'<div>'+
						'<a href="javascript:;" class="productDeleteBth" onClick="removeImage(this,'+id+')">&nbsp;</a>'
					'</div>'+
				'</div>';
		$("#photo_album_tr_2_td_${action_id}").append(s);
	}
	
	function selectImage(obj){
		var index = $(".productProWrapper_a").index($(obj));
		append_tr_1($(".productProWrapper_a")[index].src,2);
		selectClass(index);
	}
	
	function removeImage(obj,id){
		if(id){
			$.messager.confirm('', '是否删除图片，删除图片将立即删除后台图片', function(b) {
				if (b) {
					var index = $(".productDeleteBth").index($(obj));
					$(".productProgressContainer").eq(index).remove();
					var len = $(".productProgressContainer").length;
					if(len==0){
						append_tr_1("");
					}else{
						if(index==0){
							index = len - 1;
							append_tr_1($(".productProWrapper_a")[index].src,2);
						}else{
							index = index - 1;
							append_tr_1($(".productProWrapper_a")[index].src,2);
						}
					}
					selectClass(index);
					deleteImage(id);
				}
			});
		}else{
			var index = $(".productDeleteBth").index($(obj));
			$(".productProgressContainer").eq(index).remove();
			var len = $(".productProgressContainer").length;
			if(len==0){
				append_tr_1("");
			}else{
				if(index==0){
					index = len - 1;
					append_tr_1($(".productProWrapper_a")[index].src,2);
				}else{
					index = index - 1;
					append_tr_1($(".productProWrapper_a")[index].src,2);
				}
			}
			selectClass(index);
		}
	}
	
	function selectClass(index){
		$(".productProWrapper").removeClass('productImageSelected');
		$(".productProWrapper").eq(index).addClass('productImageSelected');
	}
	
	function deleteImage(id){
		$.ajax({
				url : '${request.contextPath}${namespace?default('')}/mp/product/product-deleteImage.json',
				data : {
					id : id
				},
				dataType : 'JSON',
				success : function(json) {
					$.messager.alert(json.title,json.msg,json.level);
					if(json.level!='error'){
						$("#datagrid_${action_id}").datagrid('reload');
					}
				}
			});
	}
</script>
